<template>
  <pageTabelLayout>
    <template #pageHeader>
      <a-form :model="form" layout="inline">
        <a-form-item label="流转卡号" label-col-flex="80px" style="width:300px">
          <a-input allow-clear class="bacClass" v-model="form.flowCardCode"/>
        </a-form-item>
        <a-form-item label="布号" label-col-flex="80px" style="width:300px">
          <a-input allow-clear class="bacClass" v-model="form.clothCode"/>
        </a-form-item>
        <a-form-item label="色称" label-col-flex="80px" style="width:300px">
          <a-input allow-clear class="bacClass" v-model="form.colorName"/>
        </a-form-item>
        <a-form-item label="色号" label-col-flex="80px" style="width:300px">
          <a-input allow-clear class="bacClass" v-model="form.colorCode"/>
        </a-form-item>
        <a-form-item label="染整单号" label-col-flex="80px" style="width:300px">
          <a-input allow-clear class="bacClass" v-model="form.orderCode"/>
        </a-form-item>
        <a-form-item label="染色车间" label-col-flex="80px" style="width:300px">
          <a-select multiple popup-container="html" class="bacClass" v-model="form.workshops" allow-clear
                    :max-tag-count="1">
            <a-option value="染部A">染部A</a-option>
            <a-option value="染部B"> 染部B</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="缸型" label-col-flex="80px" style="width:300px">
          <a-select multiple popup-container="html" class="bacClass" v-model="form.cylinderTypes" allow-clear
                    :max-tag-count="1">
            <a-option :value="1">E缸传1</a-option>
            <a-option :value="2"> S缸传2</a-option>
          </a-select>
        </a-form-item>
        <a-form-item style="width:900px;text-align:right;">
          <a-space style="margin-left:805px">
            <a-button v-if="pageData.tableIndex == '1'" type="primary" @click="select">查询</a-button>
            <a-button v-if="pageData.tableIndex == '1'" type="outline" @click="delelt">删除</a-button>
            <a-button v-if="pageData.tableIndex == '1'" type="primary" @click="RPai">排产</a-button>
            <a-button v-if="pageData.tableIndex == '2'" type="primary" @click="RPai">转机台</a-button>
            <a-button v-if="pageData.tableIndex == '2'" type="primary" @click="RPai">保存</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </template>
    <template #pageTabel>
      <a-tabs   :lazy-load="true" @change="tabsChange">
        <!-- <a-tab-pane title="待排产" key="1">
              <div style="min-height: 100px">
                  <ToBeScheduled />
              </div>
          </a-tab-pane>
          <a-tab-pane title="预排产" key="2">
              <div style="min-height: 100px">
               <PreScheduledProduction/>

              </div>
          </a-tab-pane>
          <a-tab-pane title="已排产" key="3">
              <div style="min-height: 100px">
                <ScheduledProduction/>
              </div>
          </a-tab-pane> -->
        <a-tab-pane title="待排产" key="1">
          <RcolorStingsNoP :form="form"></RcolorStingsNoP>
        </a-tab-pane>
        <a-tab-pane title="已排产" key="2">
          <RcolorStingsYesP :form="form"></RcolorStingsYesP>
        </a-tab-pane>
      </a-tabs>
    </template>
  </pageTabelLayout>
</template>

<script lang="ts">
// import ToBeScheduled from "./toBeScheduled.vue"
// import ScheduledProduction from "./scheduledProduction.vue"
import RcolorStingsNoP from "./RcolorStingsNoP.vue"
import RcolorStingsYesP from "./RcolorStingsYesP.vue"
import emitter from "@/hooks/useEventBus";

import {defineComponent, reactive, ref} from 'vue'

export default defineComponent({
  name: 'productionScheduling',
  components: {RcolorStingsNoP, RcolorStingsYesP},
  setup() {

    const pageData = reactive({
      tableIndex: "1"
    })


    const tabsChange = (e: string | number) => {
      pageData.tableIndex = e as string
    }
    const form: any = reactive({})

    watch(() => form.cylinderTypes, () => {
      if (form.cylinderTypes.length == 1) {
        form.cylinderType = form.cylinderTypes[0]
      } else if (form.cylinderTypes.length == 2) {
        form.cylinderType = ''
      } else {
        form.cylinderType = ''
      }
    })
    // workshops
    watch(() => form.workshops, () => {
      if (form.workshops.length == 1) {
        form.workshop = form.workshops[0]
      } else if (form.workshops.length == 2) {
        form.workshop = ''
      } else {
        form.workshop = ''
      }
    })

    const select = () => {
      emitter.emit('selectIndexOne', form)
    }

    const delelt = () => {
      emitter.emit('deletIndexOne')
    }

    const RPai = () => {
      emitter.emit('RPaiIndexOne')
    }
    return {
      RPai,
      delelt,
      select,
      pageData,
      tabsChange,
      form
    }
  },
})
</script>
<style lang="less">
#main-apss {
  height: 100%;

  .arco-tabs-content {
    border: 0px !important;
  }
}

:deep(.arco-tabs) {
  height: 100%;
}

:deep(.arco-tabs-content) {
  height: 100%;
  padding: 2px;
}

:deep(.arco-tabs-content-list) {
  height: 100%;
}

:deep(.arco-tabs-pane) {
  height: 100%;
}
</style>